<template>
  <scroll-view
    class="detail"
    :scroll-y="!dateObj.show"
  >
    <view class="banner">
      <my-swiper
        :img-list="detail.images"
        :height="252"
      />
      <!-- <image
        :src="detail.logoImage"
        class="img"
        mode="aspectFill"
      /> -->
    </view>
    <view class="card">
      <view class="flex-head">
        <view class="head">
          <h1>{{ detail.name || '' }}</h1>
          <p class="title font-12 color-555">
            <span
              v-if="detail.categoryName "
              class="oriange"
              style="margin-right:10px"
            >{{ detail.categoryName || '' }}</span>
            {{ detail.openTime }}
          </p>
        </view>
        <view
          class="tel"
          @click="serveGruop"
        >
          <image
            :src="require('@/static/route/tel.png')"
            class="img"
          />
          <p>客服</p>
        </view>
      </view>
      <view class="flex">
        <view class="tagList">
          <view
            v-for="(item,index) in detail.tag"
            :key="index"
            class="item"
          >
            {{ item.name || '' }}
          </view>
        </view>
      </view>
      <view class="flex">
        <view
          v-show="detail.price"
          class="start-price"
        >
          {{ detail.price }}
          <span style="font-size: 20rpx;">/{{ detail.salesUnit || '人' }}</span>
        </view>
        <view class="font-11">
          <span
            class="color-999"
            style="margin-left:10px"
          >销量：{{ detail.sellNumber || '0' }}</span>
        </view>
      </view>
    </view>
    <view class="address">
      <view class="address-info">
        <view class="color-333 font-12">
          {{ detail.province || '' }}{{ detail.city || '' }}{{ detail.district || '' }}{{ detail.address || '' }}
        </view>
        <!-- <view class="color-999 font-11">
          距您16.7公里，驾车约54分钟
        </view> -->
      </view>
      <view class="address-icon">
        <view
          class="loc"
          @click="openMap(detail)"
        >
          <image
            :src="require('@/static/public/locBlue.png')"
            class="img"
            mode="aspectFill"
          />
          <text>地图</text>
        </view>
        <view
          class="tel"
          @click="callTel(detail.tel)"
        >
          <image
            :src="require('@/static/public/tel.png')"
            class="img"
            mode="aspectFill"
          />
          <text>电话</text>
        </view>
      </view>
    </view>
    <view
      v-for="(item,index) in detail.details"
      :key="index"
      class="buy"
    >
      <view class="item">
        <view class="product-info">
          <image
            :src="detail.logoImage"
            class="img"
            mode="aspectFill"
          />
          <view class="intro">
            <view class="name font-13 color-333">
              {{ item.name || '' }}
            </view>
            <block v-if="detail.priceCal">
              <view
                v-if="item.price"
                class="start-price"
              >
                {{ item.price || '' }}
              </view>
            </block>
            <block v-else>
              <view
                v-if="item.skuPrice"
                class="start-price"
              >
                {{ item.skuPrice || '' }}
              </view>
            </block>
            <view
              class="info font-11"
              @click="getProDetail(item)"
            >
              购买须知>
            </view>
          </view>
        </view>
        <view
          class="btn font-13 color-fff"
          @click="buyBtn(item)"
        >
          购买
        </view>
      </view>
    </view>
    <view class="product-intro">
      <view class="title font-13 color-fff">
        商家介绍
      </view>
      <u-parse
        :content="detail.intro"
        class="content"
      />
    </view>
    <!-- 日历组件 -->
    <my-calendar
      ref="myCalendar"
      :value="dateObj.show"
      pattern="single"
      :range="dateObj.range"
      :info="dateObj.info"
      @choose-day="chooseDay"
      @chang-month="changeMonth"
      @on-close="close"
      @on-determine="confirm"
    >
      <view
        slot="number"
        class="number"
      >
        <span class="text">出行人数</span>
        <uni-number-box
          v-model="member"
          :min="chooseDetail.min"
          :max="chooseDetail.max"
          disabled="true"
          @change="changeNumber"
        />
      </view>
    </my-calendar>
    <popup-layer
      ref="popupRef"
      :direction="'top'"
      :show-pop="false"
    >
      <view class="popup">
        <text>{{ bookingDetial }}</text>
      </view>
    </popup-layer>
  </scroll-view>
</template>

<script>
	// import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import uParse from '@/components/gaoyia-parse/parse.vue';
	import myCalendar from '@/components/calendar/index.vue';
	// import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
	import moment from 'dayjs';
	import popupLayer from 'components/popup-layer/popup-layer.vue';
  import 'dingtalk-jsapi/entry/mobile';
  import openLink from 'dingtalk-jsapi/api/biz/util/openLink';

	export default {
		components: {
			// uniIcons,
			popupLayer,
			uParse,
			myCalendar
		},
		data() {
			return {
				id: '',
				currentId: '',
				detail: {
					content: '',
					intro: '',
					name: '',
					categoryName: '',
					tag: [],
					price: '',
					sellNumber: '',
					province: '',
					city: '',
					district: '',
					address: '',
					details: [],
					openTime: ''
				},
				dateObj: {
					info: {
						checkInDate: ''
					},
					range: [],
					show: false
				},
				member: 1,
				bookingDetial: '',
				chooseDetail: {
					stock: 0,
					saleSettlementPrice: '',
					date: '',
          min:1,
          max:1
				}
			};
		},
		onShareAppMessage() {
			return {
			title: `${this.detail.name}`,
			path: `/productPages/team/productDetail?id=${this.id}`,
			desc: `${this.detail.name}`,
			imageUrl:`${this.detail.logoImage}`
			}
        },
		onLoad(e) {
			this.id = e.id;
			this.queryData();
		},
		methods: {
			queryData() {
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/product/queryById',
					data: {
						id: this.id
					}
				}).then(res => {
					res.data.tag = res.data.tag ? JSON.parse(res.data.tag) : [];
					this.detail = res.data;
				});
			},
			queryCalendar(date) {
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/product/price/listByMonth',
					data: {
						date: moment(date).format('YYYY-MM-DD') || moment().format('YYYY-MM-DD'),
						productDetailId: this.currentId
					}
				}).then(res => {
					this.dateObj.range = res.data.map(t => {
						return {
							...t,
							date: t.stockDate,
							saleSettlementPrice: t.price,
							stock: t.stock,
              min:t.buyMinNumber
						};
					});
				});
			},
			buyBtn(item) {
				let detail=this.detail
        
				if(detail.priceCal){
          this.member = item.buyMinNumber
          this.chooseDetail.min=item.buyMinNumber
          this.chooseDetail.max=item.buyMinNumber
					this.currentId = item.id;
					this.queryCalendar();
					this.dateObj.show = true;
				}else{
					this.chooseDetail = {
						date: moment().format('YYYY-MM-DD'),
						saleSettlementPrice: item.skuPrice,
						stock: item.buyMaxNumber || '99',
            min:item.buyMinNumber >=0 ? item.buyMinNumber : 0
					};
					this.currentId=item.id
					this.confirm()
				}
				console.log('选择了产品', item);
			},
			changeMonth(e) {
				this.queryCalendar(e + '-01');
			},
			changeNumber(val) {
				this.member = val;
			},
			chooseDay(item) {
				console.log('选择了日期', item);
				this.chooseDetail = {
          min:item.min,
          max:item.max,
					date: item.checkInDate,
					saleSettlementPrice: item.saleSettlementPrice,
					stock: item.stock > item.buyMaxNumber ? item.buyMaxNumber:item.stock
				};
				// 重置member
				this.member = item.min;
			},
			close() {
				this.dateObj.show = false;
				this.currentId = '';
				// 重置member
				this.member = 1;
			},
			confirm() {
				let timer=''
        console.log(this.detail,this.chooseDetail)
				clearTimeout(timer)
				if (this.chooseDetail && this.chooseDetail.stock) {
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					timer=setTimeout(()=>{
						// 保存订单信息
						this.$store.commit('changeOutingOrderInfo', {
							outingDetail: this.detail,
							orderDetail: {
								...this.chooseDetail,
								member: this.chooseDetail.min,
								productDetailId: this.currentId,
								deliverShip:this.detail.deliverShip || false
							}
						});
						this.dateObj.show = false;
						this.currentId = '';
						this.$jumpUrl(`/productPages/team/orderCommit?id=${this.id}`);
						uni.hideLoading()
					},300)
				} else {
					uni.showToast({
						title: '请先选择出行日期',
						icon: 'none'
					});
				}
			},
			openMap(detail) {
				const { lat, lng, name, address } = detail;
				uni.openLocation({
					latitude: lat,
					longitude: lng,
					name,
					address,
					success: () => {
							console.log('success');
					}
				});
			},
			callTel(val) {
				dd.showCallMenu({
				  phoneNumber: val, // 期望拨打的电话号码
				  showDingCall: false // 是否显示钉钉电话
				});
			},
			getProDetail(item) {
				this.bookingDetial = item.bookingIntro;
				this.$refs.popupRef.show();
			},
      serveGruop() {
        const goodsCode = 'DT_GOODS_881628238440130'; // 力马嗨的商品码
        const token = '407da8366b05721295133e7c6d088527'; // 开发后台中应用运营-商品上架-服务群配置
        const corpId = dd.corpId;
        if(!corpId) return;
        const url = encodeURI(`https://page.dingtalk.com/wow/dingtalk/act/serviceconversation?wh_biz=tm&showmenu=false&goodsCode=${goodsCode}&corpId=${corpId}&token=${token}`);
        openLink({
          url,
          onSuccess: (res) => {
            console.log('跳转成功', res);
          },
          onFail: function (err) {
            console.log('跳转失败', err);
          }
        });
      }
		}
	};
</script>

<style lang="less" scoped>
	/deep/ .popup-content{
		background:none !important;
	}
	
	.detail {
		height: 100vh;
		background: #f5f5f5;

		.number {
			margin: 6upx 0 0 30upx;

			.text {
				margin-right: 10upx;
			}
		}

		.banner {
			width: 100%;
			height: 265px;
			// height: 504rpx;
			position: relative;
			margin-bottom: -40rpx;

			.img {
				width: 100%;
				height: 504rpx;
			}
		}

		.card {
			position: relative;
			width: 100%;
			background: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 24rpx 24rpx 0 0;

      .flex-head {
        display: flex;
				justify-content: space-between;
				align-items: flex-start;
      }

      .tel {
        font-size: 20rpx;
        margin-left: 20upx;
        font-weight: 400;
        color: #555555;
        .img {
          width: 40upx;
          height: 40upx;
          margin-bottom: 9rpx;
        }
      }

			h1 {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
				margin: 0 0 14rpx 0;
			}

			.title {
				line-height: 40rpx;
			}

			.tagList {
				overflow: hidden;
				margin: 14rpx 0;

				.item {
					display: inline-block;
					margin: 0 10rpx 10rpx 0;
					padding: 6rpx 14rpx;
					background: #fef2e7;
					border-radius: 4rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #fe7d15;
				}
			}

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
			}

			.start-price {
				&:after {
					color: #ff4d00;
					// content: '/人';
				}
			}
		}

		.address {
			width: 100%;
			height: 128rpx;
			padding: 30rpx;
			margin: 20rpx 0;
			background-color: #fff;
			display: flex;
			justify-content: space-between;

			.address-info {
				line-height: 30rpx;
			}

			.address-icon {
				display: flex;
				text-align: center;

				.loc {
					position: relative;
					padding-right: 24rpx;
				}

				.loc::after {
					content: '|';
					position: absolute;
					top: 0;
					right: 0;
					color: #e8e8e8;
				}

				.tel {
					padding-left: 22rpx;
				}

				.img {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					display: block;
					margin-top: 10rpx;
					color: #555;
					font-size: 20rpx;
				}
			}
		}

		.buy {
			background: #fff;
			padding: 40rpx 30rpx;

			.item {
				display: flex;
				align-items: center;
				margin-bottom: 44rpx;

				.product-info {
					display: flex;
					flex: 1;

					.img {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					.intro {
						display: flex;
						align-items: flex-start;
						flex-direction: column;
						justify-content: space-between;

						.info {
							color: #2d87e6;
						}

						.start-price {
							margin-top: 20rpx;

							&:after {
								color: #ff4d00;
								content: '';
							}
						}
					}
				}

				.btn {
					display: flex;
					width: 140rpx;
					height: 54rpx;
					margin-left: 20rpx;
					background: linear-gradient(135deg, #f78833 0%, #ffc77b 100%);
					border-radius: 41rpx;
					font-weight: 600;
					align-items: center;
					justify-content: center;
				}
			}

			.item:last-child {
				margin: 0;
			}
		}

		.product-intro {
			.title {
				width: 100%;
				height: 104rpx;
				padding: 15rpx 0 0 30rpx;
				background: linear-gradient(90deg, #b7c4e1 0%, #d6def3 100%);
			}

			.content {
				background: #fff;
				margin-top: -29rpx;
				border-radius: 20rpx 20rpx 0px 0px;
				padding: 46rpx 30rpx 0 30rpx;
			}
		}
		
		.popup {
			border-radius:40upx 40upx 0 0;
			padding:60upx 30upx 70upx;
			line-height: 46upx;
			background:#FFF;
		}
	}
</style>
